<template>
    <div :id="cid == 0 ? 'TG' : 'TW'" class='card d-flex flex-column justify-center align-center'
        :class="!card.active ? 'card_hover' : ''"
        @click.capture="() => !card.active ? callfun(toRaw(card)) : gopage(card.label)">
        <span class="num" v-if="card.active && card.reward !== 0">+{{ card.reward.toFixed(2) }}</span>
        <div class="icon">
            <component :is="icons.getIcon(card.label)"></component>
            <GreenHook class="gou" :class="card.active ? 'gougou' : 'notgou'"></GreenHook>
        </div>
        <span v-if="!card.active">{{ card.label }}</span>
        <span class="c-title-5 c-clor">{{ card.subtitle }}</span>
        <span class="red_pots" v-if="card.isTap"></span>
    </div>
</template>

<script lang='ts' setup>
import Tg from "./svg/tg.vue";
import tuite from "./svg/twt.vue";
import GreenHook from "@/components/j-svg/greenhook.vue";
import { onMounted, toRaw, onBeforeUnmount, watch, ref } from "vue";
import { BIndText, BIndType, Cardmin } from "./script/card";
import { useUser } from "@/stores/user";
import { check_fans } from "../../script/check_fans";


const emit = defineEmits(["update"])

const user = useUser();


onMounted(() => {

    // setTimeout(() => {
    //     if (user.info) {
    //         if (props.cid == 0 && user.info.telegramBound == 0) {
    //             // if (user.info.telegramBound == 0 || user.info.twitterBound == 0) {
    //             createTg();
    //         }
    //     }
    // }, 2400);
    // console.log("执行1111")
});
// watch(() => user.info, () => {
//     if (props.cid == 0 && user.info.telegramBound == 0) {
//         // if (user.info.telegramBound == 0 || user.info.twitterBound == 0) {
//         createTg();
//     }
// })
// TG = 'Telegram',
//     TWITTER = 'Twitter'
function gopage(label: string) {
    let temp: any = new Date().getTime()

    if (label == 'Telegram') {
        localStorage.setItem('oldTgTime', String(new Date(temp).getDate()))
        window.open("https://t.me/Chainingview");
    } else {
        localStorage.setItem('oldTwTime', String(new Date(temp).getDate()))
        window.open("https://twitter.com/ChainingView");
    }
    check_fans.init()
}
async function onTelegramAuth(userTg: any) {
    console.log(userTg, "这是tg回调")
    setTimeout(async () => {
        await user.checkIsTelegramUser(userTg.id);
    }, 15000)
    window.open("https://t.me/Chainingview");
    // emit("update");
}

// async function toGetReward() {
//     await user.getJoinNumberReword(true);
// }

function createTg() {
    let TG: Element = document.querySelector('#TG')!;

    if (user.info.telegramBound == 1) {
        while (TG.firstChild) {
            TG.removeChild(TG.firstChild);
        }
        return
    }
    // 这里是根据步骤3的代码动态创建的，有需要可自行修改
    const script = document.createElement('script');
    script.async = true;
    script.src = 'https://telegram.org/js/telegram-widget.js?22';
    script.setAttribute('data-size', "large");
    // script.setAttribute('data-userpic', this.userpic);
    script.setAttribute('data-telegram-login', "chainingview_bot");
    script.setAttribute('data-request-access', "write");
    // if (this.radius) {
    // 	script.setAttribute('data-radius', this.radius);
    // }
    (window as any).onTelegramAuth = onTelegramAuth;
    script.setAttribute('data-onauth', 'window.onTelegramAuth(user)');
    TG.appendChild(script);

}
const icons = {
    [BIndType.TG]: Tg,
    [BIndType.TWITTER]: tuite,
    getIcon: function (key: any): any {
        //@ts-ignore
        return icons[key];
    }
}
const props = defineProps({
    cid: Number,
    card: {
        type: Cardmin,
        default: {
            active: false,
            label: BIndType.TG,
            subtitle: BIndText.COOM,
            reward: 0
        }
    },
    callfun: {
        type: Function,
        default: (item: Cardmin) => { }
    }
});
</script>

<style lang='less' scoped>
:deep(iframe#telegram-login-chainingview_bot) {
    opacity: 0.01;
    transform: scale(2.5);
    // width: 96px !important;
    // height: 98px !important;
    position: absolute;
}

.card {
    position: relative;
    width: 96px;
    // height: 88px;
    // background: #15181D;
    border-radius: 4px;
    border: 1px solid var(--border);
    position: relative;
    padding-block: 8px;

    &:first-child {
        margin-right: 10px;
        overflow: hidden;

    }

    .red_pots {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #F6475D;
        position: absolute;
        top: 5px;
        right: 5px;
    }

    .icon {
        position: relative;

        .gou {
            position: absolute;
            right: -10px;
            top: 44%;
        }

        margin-block:5px;
    }


    .c-clor {
        color: var(--color);
    }

    .num {
        color: var(--main);
    }

    .gougou {
        :deep(#gougou) {
            fill: #24A148;
        }
    }

    .notgou {
        :deep(#gougou) {
            fill: #6F7684;
        }
    }

    span {
        // margin-top: 4px;
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #EAECEF;
        // line-height: 20px;
    }
}

// .card_active{
//     &:hover {
//         :deep(#tee) {
//             fill: black !important;

//         }
//     }
// }

.card_hover {
    &:hover {
        background-color: var(--main);
        border: 1px solid var(--main);
        transition: all 1s ease;

        span,
        :deep(#tee) {
            transition: all 1s ease;
            color: black;
            fill: black !important;
        }
    }
}
</style>